<template>
  <div class="box">
    <div class="search">
      <el-select
        v-model="selectValueList"
        filterable
        multiple
        placeholder="回车搜索"
        @keyup.enter.native="selectBlur"
        @visible-change="visibleChange"
      >
        <el-option
          v-for="item in resultList"
          :key="item.lineId"
          :value="item.lineId"
          :label="item.lineName"
          @click.native="select_item(item)"
        />
      </el-select>
    </div>
    <div class="tag_out">
      <el-tag v-for="(item ,index) of checkedList" :key="item.lineId" closable @close="Delete(index)">
        {{ item.lineName }}
      </el-tag>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchSelect',
  props: {
    resultList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      keyword: '', // 文本框的值
      selectValueList: [],
      checkedList: []
    }
  },
  created() {
  },
  methods: {
    selectBlur(e) {
      this.keyword = e.target.value
      this.$emit('requestReslutList', this.keyword)
    },
    select_item(item) {
      const ItemIndex = this.checkedList.findIndex((v) => {
        return v.lineId === item.lineId
      })
      if (ItemIndex === -1) {
        this.checkedList.push(item)
      } else {
        this.checkedList.splice(ItemIndex, 1)
      }
      this.$emit('selectChange', this.checkedList)
    },
    Delete(index) {
      // if (this.checkedList.length === 1) {
      //   this.$message.info('请至少保留一名获奖者')
      //   return
      // }
      this.checkedList.splice(index, 1)
      this.selectValueList.splice(index, 1)
      this.$emit('selectChange', this.checkedList)
    },
    visibleChange(val) {
      if (!val) {
        this.$emit('visibleChange')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$hoverColor:#1D143C;// 鼠标停留主色调浅色
$mainColor:#3b425d;// 主色调
  .box {
    .search {
      width: 100%;
      display: flex;
      .el-select .el-select__tags>span {
        display: none;
      }
      .el-select .el-input.is-focus .el-input__inner {
        border-color: #3b425d;
      }
      .el-select .el-input__inner:focus {
        border-color: #3b425d;
      }
    }
    .tag_out {
      width: 100%;
      margin-top: 20px;
      .out_item {
        display: inline-block;
        padding: 5px 10px;
        background: rgb(54, 181, 139);
        border-radius: 4px;
        box-sizing: border-box;
        font-size: 14px;
        color: #fff;
        margin: 5px;
        span {
          display: inline-block;
          width: 18px;
          height: 18px;
          background: #fff;
          border-radius: 50%;
          text-align: center;
          line-height: 18px;
          font-size: 16px;
          color: rgb(54, 181, 139);
          cursor: pointer;
        }
      }
      .el-tag + .el-tag {
        margin-left: 10px;
      }
    .el-tag {
      color: $mainColor;
      background-color: #ffffff;
      border-color: $mainColor;
      ::v-deep .el-tag__close {
        color: $mainColor;
      }
      ::v-deep .el-icon-close:hover {
        color:#ffffff;
        background: $mainColor;
      }
    }
  }
}
	.el-select-dropdown__item.selected {
		color: #3b425d !important;
	}
</style>
